import React from "react";
import styled from "@emotion/styled";
import {Menu} from "antd";
import {Navigate, Route, Routes} from "react-router";
import {Link} from "react-router-dom";
import {KanBan} from "./mods/kanban";
import {Epic} from "./mods/epic";

export const ProjectScreen = () => {
  return (
    <Container>
      <Aside>
        <Menu mode={"inline"}>
          <Menu.Item key={"kanban"}>
            <Link to={"kanban"}>看板</Link>
          </Menu.Item>
          <Menu.Item key={"epic"}>
            <Link to={"epic"}>任务组</Link>
          </Menu.Item>
        </Menu>
      </Aside>

      <Main>
        <Routes>
          <Route path={"/kanban"} element={<KanBan/>}/>
          <Route path={"/epic"} element={<Epic/>}/>
          <Navigate to={window.location.pathname + "/kanban"} replace={true}/>
        </Routes>
      </Main>
    </Container>
  )
}

const Container = styled.div`
  display: grid;
  grid-template-columns: 16rem 1fr;
`;

const Aside = styled.aside`
  background-color: rgb(244, 245, 247);
  display: flex;
`;

const Main = styled.div`
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
  display: flex;
  overflow: hidden;
`;
